<template>
  <view class="w-750rpx m-a bg-#fff"
    :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
    @click="openConversationList(getUserVo.userVo)"
  >
    <view class="flex-sb-center pl-32rpx pr-32rpx pt-16rpx pb-16rpx">
      <base-img-box :size="144" :round="144" :imgSrc="getUserVo.personAvatar.preUrl" :thumbnailPreUrl="getUserVo.personAvatar.thumbnailPreUrl" />
      <view class="w-510rpx">
        <view class="flex-sb-center">
          <view class="font-size-32rpx font-bold">{{ getUserVo.userProfileInfoVo.nickname }}</view>
          <view 
            class="font-size-18rpx flex-center leading-0 rounded-full bg-#F93F3F w-32rpx h-32rpx color-#fff"
            v-if="data.unreadCount"
          >{{ data.unreadCount }}</view>
        </view>
        <view class="mt-16rpx color-#666 font-size-28rpx ellipsis-2">{{ getMessageInfo }}</view>
      </view>
    </view>
    <view class="border-1px"></view>
  </view>
</template>

<script lang="ts" setup>
import baseImgBox from "@/components/base/base-img-box.vue";
import { useThemeStore, useUserStore } from '@/store';
import { useToast } from "wot-design-uni";
// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();
const toast = useToast();

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
})

// 打开会话列表
const openConversationList = (item) => {
  // return toast.show('功能调试中');
  if (!user.isLogined) {
    uni.navigateTo({ url: '/pages/login/index' });
    return
  }
  
  if (!user.activityInfo.id) {
    toast.show('请先填写部分资料');
    setTimeout(() => {
      uni.navigateTo({ url: '/activity/addActivityInfo' })
    }, 1000)
    return
  }
  // 1v1 chat: conversationID = `C2C${userID}`
  // group chat: conversationID = `GROUP${groupID}`
  // const conversationID = 'C2C' + item.id;
  // uni.navigateTo({
  //   url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`
  // });
  
  uni.navigateTo({
    url: `/activity/chatRoom?conversationID=${item.id}`
  });
}

const getUserVo = computed(() => {
  const userVo = props.data.toUserInfo || {};
  const personAvatar = userVo.personAvatar || { preUrl: ''};
  const userProfileInfoVo = userVo.userProfileInfoVo || {};
  return {
    userVo,
    userProfileInfoVo,
    personAvatar
  }
})

const getMessageInfo = computed(() => {
  const { messageInfo } = props.data || {};
  // const _messageInfo = JSON.parse(messageInfo) || {};
  // const MsgList = _messageInfo.MsgList || [];
  // const MsgItem = MsgList[0] || {};
  // const MsgBody = MsgItem.MsgBody || [];
  // const MsgBodyItem = MsgBody[0] || {};
  // MsgBodyItem.MsgContent.Text
  const _messageInfo = messageInfo.indexOf(`"`) !== -1 ? JSON.parse(messageInfo) : messageInfo;
  return _messageInfo || ''
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
</style>
